<%@ page contentType="text/html;charset=UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="tags" tagdir="/WEB-INF/tags" %>
<c:set var="ctx" value="${pageContext.request.contextPath}"/>

<html>
<head>
	<title>工作台</title>
	<script type="text/javascript" src="${ctx}/static/charts/highcharts.js"></script>
	<script type="text/javascript" src="${ctx}/static/charts/exporting.js"></script>
	<script type="text/javascript" src="${ctx}/static/charts/echarts.min.js"></script>
	<script>
		$(function () {
			$('#volunteers').highcharts({
				title: {
					text: '志愿者新量图',
					x: -20 //center
				},
				subtitle: {
					text: '志愿者新量图',
					x: -20
				},
				xAxis: {
					categories: [${categories}]
				},
				yAxis: {
					title: {
						text: '志愿者人数'
					},
					plotLines: [{
						value: 0,
						width: 1,
						color: '#808080'
					}]
				},
				tooltip: {
					valueSuffix: '人'
				},
				legend: {
					layout: 'vertical',
					align: 'right',
					verticalAlign: 'middle',
					borderWidth: 0
				},
				series: [{
					name: '志愿者',
					data: [${volunters}]
				}]
			});

			$('#activitys').highcharts({
				title: {
					text: '活动增量图',
					x: -20 //center
				},
				subtitle: {
					text: '活动增量图',
					x: -20
				},
				xAxis: {
					categories: [${categories}]
				},
				yAxis: {
					title: {
						text: '活动数量'
					},
					plotLines: [{
						value: 0,
						width: 1,
						color: '#008080'
					}]
				},
				tooltip: {
					valueSuffix: '个'
				},
				legend: {
					layout: 'vertical',
					align: 'right',
					verticalAlign: 'middle',
					borderWidth: 0
				},
				series: [{
					name: '活动',
					data: [${activities}]
				}]
			});


			$('#times').highcharts({
				title: {
					text: '公益时间增量图',
					x: -20 //center
				},
				subtitle: {
					text: '公益时间增量图',
					x: -20
				},
				xAxis: {
					categories: [${categories}]
				},
				yAxis: {
					title: {
						text: '公益时间(分钟)'
					},
					plotLines: [{
						value: 0,
						width: 1,
						color: '#808080'
					}]
				},
				tooltip: {
					valueSuffix: '分钟'
				},
				legend: {
					layout: 'vertical',
					align: 'right',
					verticalAlign: 'middle',
					borderWidth: 0
				},
				series: [{
					name: '公益时间',
					data: [${times}]
				}]
			});
		});

	</script>
</head>

<body>

	<div class="content">
		<%--<div class="page-subcate-list">
			<div class="page-searchbox">
				<input type="text" placeholder="输入查询条件">
				<div class="pull-right">
					<button>批量导入</button>
					<button><i class="fa fa-plus" aria-hidden="true"></i> 新建</button>
				</div>
			</div>
			<div class="page-subcate-item">
				<label>服务领域</label>
				<ul class="choices">
					<c:forEach items="${userServiceFiled}" var="skill">
						<li><a href="${skill.name}">${skill.name}</a></li>
					</c:forEach>
				</ul>
				<span class="more">
					<a href="#">更多 <i class="fa fa-angle-down" aria-hidden="true"></i></a>
				</span>
			</div>
			<div class="page-subcate-item">
				<label>专业技能</label>
				<ul>
					<c:forEach items="${userSkill}" var="skill">
						<li><a href="${skill.name}">${skill.name}</a></li>
					</c:forEach>
				</ul>
				<span class="more">
					<a href="#">更多 <i class="fa fa-angle-down" aria-hidden="true"></i></a>
				</span>
			</div>
			<div class="page-subcate-item">
				<label>职业</label>
				<ul class="choices">
					<c:forEach items="${userJob}" var="skill">
						<li><a href="${skill.name}">${skill.name}</a></li>
					</c:forEach>
				</ul>
				<span class="more">
					<a href="#">更多 <i class="fa fa-angle-down" aria-hidden="true"></i></a>
				</span>
			</div>
		</div>--%>
		<div class="page-volunteer-recruitment-grid">
			<ul>
				<li>
					<div class="volunteer-recruitment-card">
						<div class="card-body">
							<div class="card-title">志愿者</div>
							<div class="card-title">${group.volunteers}人</div>
						</div>
					</div>
				</li>
				<li>
					<div class="volunteer-recruitment-card">
						<div class="card-body">
							<div class="card-title">活动</div>
							<div class="card-title">${group.actvitys}次</div>
						</div>
					</div>
				</li>
				<li>
					<div class="volunteer-recruitment-card">
						<div class="card-body">
							<div class="card-title">公益时间 </div>
							<div class="card-title">${group.times}分钟</div>
						</div>
					</div>
				</li>
			</ul>
		</div>

			<div class="page-volunteer-recruitment-grid">
				<div id="main" style="width: 700px;height:400px;"></div>
			</div>
			<!--
			<div class="page-volunteer-recruitment-grid">
				<div id="volunteers" style="min-width:700px;height:400px"></div>
			</div>

			<div class="page-volunteer-recruitment-grid">
				<div id="activitys" style="min-width:700px;height:400px"></div>
			</div>

			<div class="page-volunteer-recruitment-grid">
				<div id="times" style="min-width:700px;height:400px"></div>
			</div>
			-->
	</div>

	<script type="text/javascript">
		// 基于准备好的dom，初始化echarts实例
		var myChart = echarts.init(document.getElementById('main'));

		option = {
			title: {
				text: '${group.name}'
			},
			tooltip: {
				trigger: 'axis'
			},
			legend: {
				data:['志愿者','公益活动','公益时间']
			},
			grid: {
				left: '3%',
				right: '4%',
				bottom: '3%',
				containLabel: true
			},
			toolbox: {
				feature: {
					saveAsImage: {}
				}
			},
			xAxis: {
				type: 'category',
				boundaryGap: false,
				data: [${categories}]
			},
			yAxis: {
				type: 'value'
			},
			series: [
				{
					name:'志愿者',
					type:'line',
					stack: '总量',
					data:[${volunters}]
				},
				{
					name:'公益活动',
					type:'line',
					stack: '总量',
					data:[${activities}]
				},
				{
					name:'公益时间',
					type:'line',
					stack: '总量',
					data:[${times}]
				}
			]
		};

		// 使用刚指定的配置项和数据显示图表。
		myChart.setOption(option);
	</script>

</body>
</html>
